<template>
  <div id="edit">
    <div class="edit">
      <div class="head">
        <div class="title">个人奖项</div>
      </div>
      <div class="select">
        <div class="BtnOn">
          <span>是否编辑</span>
          <el-switch v-model="passOn" class="switch" style="--el-switch-off-color: transparent" />
        </div>
      </div>
      <div class="body">
        <div class="form">
          <el-form :rules="rules" :model="form" label-width="120px">
            <el-form-item label="奖项名称" prop="hpTitle">
              <el-input v-model="form.hpTitle" placeholder="请输入奖项名称" />
            </el-form-item>
            <el-form-item label="搞笑名称" prop="hpHtitle">
              <el-input v-model="form.hpHtitle" placeholder="请输入奖项幽默名称" />
            </el-form-item>
            <el-form-item label="奖项类型" prop="hpCategory">
              <el-select v-model="form.hpCategory" placeholder="请选择奖项类型">
                <el-option v-for="item in wardOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="发奖单位" prop="hpUnit">
              <el-input v-model="form.hpUnit" placeholder="请输入发奖单位" />
            </el-form-item>
            <el-form-item label="单位等级" prop="hpLevel">
              <el-select v-model="form.hpLevel" placeholder="请选择获奖等级">
                <el-option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="发奖日期" prop="hpDate">
              <el-date-picker v-model="form.hpDate" type="date" placeholder="请选择项目完成日期" />
            </el-form-item>
            <!-- 上传 -->
            <el-form-item label="奖项图片">
              <el-upload v-model:file-list="fileList" action="#" list-type="picture-card" :auto-upload="false"
                :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
              <!-- 上传浏览 -->
              <el-dialog v-model="dialogVisible">
                <img class="pImg" :src="dialogImageUrl" alt="预览图片" />
              </el-dialog>
            </el-form-item>

            <!-- 介绍 -->
            <el-form-item prop="hpCon" label="介绍奖项">
              <el-input v-model="form.hpCon" type="textarea" placeholder="请输入奖项介绍" :rows="5" resize="none" />
            </el-form-item>
            <el-form-item>
              <el-button round>修改</el-button>
              <el-button round>回退</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import type { FormRules, UploadProps, UploadUserFile } from "element-plus";
import { useRoute } from "vue-router";
//请求参数
import { getOne } from "../../../../api/index2/godw";

const route = useRoute(); //接受参数的route
const queryId = route.query.id;
const passOn = ref(true);

const wardOptions = [
  {
    value: "1",
    label: "科技",
  },
  {
    value: "2",
    label: "体育",
  },
  {
    value: "3",
    label: "艺术",
  },
  {
    value: "4",
    label: "理学",
  },
  {
    value: "5",
    label: "文学",
  },
];
const levelOptions = [
  {
    value: "1",
    label: "国级",
  },
  {
    value: "2",
    label: "省级",
  },
  {
    value: "3",
    label: "市级以下",
  },
];
const form = ref({
  hpTitle: "",
  hpHtitle: "",
  hpCategory: "",
  hpUnit: "",
  hpDate: "",
  hpLevel: "",
  hpCon: "",
  hpImg1: "",
  hpImg2: "",
  hpImg3: "",
});
const rules = reactive<FormRules>({
  hpTitle: [
    { required: true, message: "请输入奖项名称", trigger: "blur" },
    { max: 50, message: "不要超过50", trigger: "blur" },
  ],
  hpHtitle: [
    { required: true, message: "请输入幽默名称", trigger: "blur" },
    { max: 50, message: "不要超过50", trigger: "blur" },
  ],
  hpCategory: [
    { required: true, message: "请选择奖项类别", trigger: "change" },
  ],
  hpUnit: [{ required: true, message: "请输入发奖单位", trigger: "blur" }],
  hpDate: [{ required: true, message: "请选择完成日期", trigger: "blur" }],
  hpLevel: [{ required: true, message: "请选择获奖等级", trigger: "change" }],
  hpCon: [
    { required: true, message: "请输入项目介绍", trigger: "blur" },
    {
      min: 10,
      max: 550,
      message: "不得低于10字,也不要超过550字",
      trigger: "blur",
    },
  ],
});
//默认加载图片
const fileList = ref<UploadUserFile[]>([
  {
    name: "蔡徐坤",
    url: "https://p4.itc.cn/q_70/images03/20220810/8ada6be35e134e5fa8aad1853878f660.gif",
  },
  {
    name: "蔡徐坤2",
    url: "https://p8.itc.cn/q_70/images03/20220810/d3d263ea662342b3a979f244fee36e7f.gif",
  },
  {
    name: "蔡徐坤3",
    url: "https://p2.itc.cn/q_70/images03/20220810/915a204a99ab4b1aa9e568b4dbb9d23b.gif",
  },
]);

const dialogImageUrl = ref("");
//显示预览上传的图片
const dialogVisible = ref(false);
//删除图片
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};
//浏览图片
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
onMounted(() => {
  dataList();
});
//DataList
const dataList = () => {
  if (queryId != null) {
    getOne(queryId).then((res) => {
      console.log(res)
      form.value = res;
      switch (res.hpCategory) {
        case 1:
          res.hpCategory = "科技"
          break;
        case 2:
          res.hpCategory = "艺术"
          break;
        case 3:
          res.hpCategory = "体育"
          break;
      }
    });
  } else {
    console.log("无ID,请检查后端");
  }
};
</script>

<style lang="less" scoped>
#edit {
  width: 100%;
  height: 100%;

  .edit {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    border-image-source: radial-gradient(65% 65%,
        transparent 0px,
        transparent 100%,
        cyan 100%);
    border-image-slice: 1;
    border-width: 2px;
    border-style: solid;
    background: linear-gradient(0deg,
        rgba(white, 0.1),
        rgba(white, 0.3),
        rgba(white, 0.1));

    .head {
      width: 100%;
      height: 10%;
      overflow: hidden;

      .title {
        width: 20%;
        margin: 0 auto;
        height: 80%;
        text-align: center;
        color: aliceblue;
        font-size: 24px;
        line-height: 60px;
        border-bottom: 5px solid aqua;
      }
    }

    .select {
      width: 95%;
      height: 5%;
      margin: 0 auto;

      .BtnOn {
        width: 100%;
        height: 100%;

        span {
          margin-left: 5%;
          margin-right: 0.5%;
          color: aliceblue;
          font-weight: lighter;
          border-bottom: 1px solid aqua;
        }
      }
    }

    .body {
      width: 95%;
      margin: 0 auto;
      height: 85%;
      overflow: hidden;
      overflow-y: scroll;

      &::-webkit-scrollbar {
        width: 2px;
        height: 100%;
      }

      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 2px;
        background: aqua;
      }

      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        border-radius: 2px;
        background: rgba(white, 0.2);
      }

      .form {
        width: 75%;
        margin-left: 10%;

        :deep(.el-form-item__label) {
          color: white;
        }

        :deep(.el-input__wrapper) {
          --el-input-focus-border-color: aqua;

          .el-input__inner {
            color: white;

            &::-webkit-input-placeholder {
              /* WebKit browsers*/
              color: rgba(aqua, 0.5);
            }
          }
        }

        :deep(.el-input__wrapper) {
          background-color: transparent;
        }

        :deep(.el-textarea) {
          // 一下为正常
          background-color: transparent;

          .el-textarea__inner {
            overflow: hidden;
            overflow-y: scroll;

            &::-webkit-scrollbar {
              width: 2px;
              height: 100%;
            }

            &::-webkit-scrollbar-thumb {
              /*滚动条里面小方块*/
              border-radius: 2px;
              background: aqua;
            }

            &::-webkit-scrollbar-track {
              /*滚动条里面轨道*/
              border-radius: 2px;
              background: rgba(white, 0.2);
            }

            background-color: transparent;
            --el-input-focus-border-color: aqua;
            color: white;

            &::-webkit-input-placeholder {
              /* WebKit browsers*/
              color: rgba(aqua, 0.5);
            }
          }
        }

        :deep(.el-button) {
          margin: 0 auto;
          width: 30%;
          background-color: transparent;
          color: white;

          &:first-child {
            --el-button-border-color: aqua;
            --el-button-active-border-color: aqua;
            --el-button-hover-text-color: aqua;
            --el-button-divide-border-color: aqua;
          }
        }

        :deep(.el-dialog) {
          width: 30%;
          --el-dialog-bg-color: rgba(255, 119, 0, 0.1);
          border-image-source: radial-gradient(65% 65%,
              transparent 0px,
              transparent 100%,
              orange 100%);
          border-image-slice: 1;
          border-width: 2px;
          border-style: solid;

          .el-dialog__title {
            color: orange;
          }

          .el-dialog__close {
            color: orange;

            &:hover {
              color: red;
            }
          }

          .el-dialog__body {
            span {
              color: white;
            }
          }

          .pImg {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
